<template>
  <div class="container" v-loading="isLoading">
    <el-card >
      <template #header>
        <el-form inline ref="searchForm">
          <el-form-item label="投票名称">
            <el-select style="width:500px" v-model="searchForm.id" >
              <el-option
                v-for="(oVal, oIdx) of voteList"
                :key="oIdx"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button type="success" @click="exportExcel">导出投票报表</el-button>
        </div>
      </template>

      <el-table :data="tableData" border id="out-table" stripe>
        <el-table-column prop="optionName" label="投票内容" />
        <el-table-column prop="real_name" label="实名信息" />
        <!-- <el-table-column prop="phone" label="手机号" /> -->
        <el-table-column prop="nick_name" label="微信昵称" />
        <el-table-column prop="avatar_url" label="微信头像">
          <template slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.avatar_url"
              :preview-src-list="[row.avatar_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="{ row }">
            <div v-if="row.sex=='1'">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column prop="subdistrict_name" label="住户小区" />
        <el-table-column prop="subdistrict_id" label="详细地址">
          <template slot-scope="{ row }">
            <div>{{row.building_no+'栋'+row.unit+'单元'+row.room_num+'室'}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>
  </div>
</template>

<script>
import API from '@/api';
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { table } from "@/utils/mixins";
export default {
  mixins: [table],
  data: () => ({
    communityId:"",//社区活动id
    isLoading:true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      id:"",
      page: 1, // 当前页码
      per_page: 20, // 每页条数
    },
    voteList:[],
    communityList:[],
    voterData:[],
  }),

  created() {
    API.getVoteList(this.searchForm)
      .then(({ data }) => {
        this.voteList = data.items.map((item) => {
          return {value:item.id,label:item.name}
        });
        if(this.voteList.length > 0) {
          this.searchForm.id=this.voteList[0].value
          this.getList()
        }
      }).catch((err)=>{
      }).finally(() =>{
      })
    API.getCommunityList().then(({data})=>{
      this.communityList=data.items.map(item=>{
        return {value:item.id,label:item.name}
      })
    })
  },

  methods: {
    getList(){
      this.isLoading=true
      this.voterData=[]
      API.getVoteRecordList(this.searchForm.id).then(({data})=>{
        let options=data.vote_options
        for(let i=0;i<options.length;i++){
          let optionName=options[i].name
          if(options[i].vote_user){
            options[i].vote_user.forEach(item=>{
              item.optionName=optionName
              this.voterData.push(item)
            })
          }
        }
        this.voterData.forEach(item=>{
          item.subdistrict_name=this.communityList.filter(sitem=>{
              return sitem.value==item.subdistrict_id
            })[0].label
        })
        this.tableData=this.voterData
        this.tableTotal=this.voterData.length
      }).catch(()=>{
        this.tableData=[]
        this.tableTotal=0
      }).finally(() =>{
        this.isLoading = false;
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            `投票数据.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

  },
};
</script>

<style lang="scss" scoped></style>
